<style>
    .add-header{
        background-color: transparent;
        padding: 18px;
        position: relative;
        width: 100%;
    }
    .add-header .add-header-title{
        padding: 10px 0;
    }
    .add-header .add-header-title .name{
        font-size: 28px;
        padding-left: 10px;
    }
    .add-header .add-header-title .icon svg{
        width: 37px;
        height: 37px;
        margin-bottom: 9px;
    }

    .add-header .add-actions:not(._hidden){
        padding: 10px 0;
        background-color: #f8f8f8;
        border-top: 1px solid #e3e3e3;
        border-bottom: 1px solid #e3e3e3;
    }
    .add-header .add-actions .add-actions-title .name{
        font-size: 26px;
    }
    .add-header .add-actions .add-actions-title .icon svg{
        width: 32px;
        height: 32px;
        margin-bottom: 6px
    }
    .add-header .add-actions:not(._hidden) .add-actions-title{
        display: none;
    }
    .add-header .add-actions .add-actions-buttons{
        text-align: right;
    }
    .add-header .add-actions._hidden {
        position: fixed;
        top: 0;
        right: 0;
        background-color: #f8f8f8;
        width: calc(100% - 240px);
        border-top: 1px solid #e3e3e3;
        border-bottom: 1px solid #e3e3e3;
        padding: 20px;
        z-index: 99999;
    }

    .edit-content{
        min-height: 800px;
    }
</style>
{{--添加头部--}}
<div class="add-header">
    <div class="row">
        <div class="col-lg-6">
            <div class="add-header-title">
                @if(isset($svgIconName) && !empty($svgIconName))
                <span class="icon">
                    <svg style="" width="30" height="30">
                        <use xlink:href="{{com_bootstrap_icon_path()}}/bootstrap-icons.svg#{{$svgIconName}}" />
                    </svg>
                </span>
                @endif
                <span class="name">{{$addHeaderName}}</span>
            </div>
        </div>
        <div class="col-lg-6">
        </div>
    </div>

    <div class="add-actions">
        <div class="add-actions-content row justify-content-end">
            <div class="add-actions-title col-lg-4">
                @if(isset($svgIconName) && !empty($svgIconName))
                    <span class="icon">
                    <svg style="" width="22" height="22">
                        <use xlink:href="{{com_bootstrap_icon_path()}}/bootstrap-icons.svg#{{$svgIconName}}" />
                    </svg>
                </span>
                @endif
                <span class="name">{{$addHeaderName}}</span>
            </div>
            <div class="add-actions-buttons col-lg-8">
                <button type="button" id="addBackButton" class="btn btn-outline-dark">
                    <span class="icon">
                        <svg style="" width="18" height="18">
                            <use xlink:href="{{com_bootstrap_icon_path()}}/bootstrap-icons.svg#arrow-counterclockwise" />
                        </svg>
                    </span>
                    返回</button>
                <button type="button" id="addResetButton" class="btn btn-outline-dark">
                    <span class="icon">
                        <svg style="" width="18" height="18">
                            <use xlink:href="{{com_bootstrap_icon_path()}}/bootstrap-icons.svg#arrow-left" />
                        </svg>
                    </span>
                    重置</button>
                <button type="button" id="addSaveButton" class="btn btn-danger">
                    <span class="icon">
                        <svg style="" width="18" height="18">
                            <use xlink:href="{{com_bootstrap_icon_path()}}/bootstrap-icons.svg#check2" />
                        </svg>
                    </span>保存
                </button>
            </div>
        </div>
    </div>

</div>
<input type="hidden" id="addBackUrl" @if(isset($addBackUrl)) value="{{$addBackUrl}}" @else value="" @endif >
<input type="hidden" id="addSaveUrl" @if(isset($addSaveUrl)) value="{{$addSaveUrl}}" @else value="" @endif >
<meta name="csrf-token" content="{{csrf_token()}}">
<script>
    $(document).ready(function(){
        //监听向上滚动
        $(document).scroll(function(){
            let scroHeight = $(document).scrollTop();
            console.log(scroHeight);

            if(scroHeight > 50){
                $('.add-header .add-actions').removeClass('_hidden').addClass('_hidden');
            } else {
                $('.add-header .add-actions').removeClass('_hidden');
            }

        });

        let addBackUrl = $('#addBackUrl').val();
        let addSaveUrl = $('#addSaveUrl').val();

        //返回键
        addBackUrl && $('#addBackButton').on('click', function(){
            window.location.href = addBackUrl;
        });
        //重置键
        $('#addResetButton').on('click', function(){
            $('#editForm')[0].reset();
        });
        //保存键
        addBackUrl && addSaveUrl && $('#addSaveButton').on('click', function(){

            //去掉禁用的标志
            $('select:disabled').each(function(e){
                $(this).removeAttr('disabled');
            });
            $('input:disabled').each(function(e){
                $(this).removeAttr('disabled');
            });

            //防止重复提交
            let _this = $(this);
            _this.attr('disabled', 'disabled');

            $.ajax({
                url: addSaveUrl,
                type: 'POST',
                data: $('#editForm').serialize(),
                dataType: 'json',
                headers:{
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(e){
                    console.log(e);
                    // return;
                    if(e.code == 20000){
                        layer.msg('操作成功');
                        setTimeout(function(){
                            window.location.href = addBackUrl;
                        }, 1000);
                    } else {
                        layer.msg(e.msg);
                    }
                },
                error: function(e){
                    let errorMessage = e.responseText;
                    errorMessage = errorMessage ? JSON.parse(errorMessage) : [];
                    errorMessage = errorMessage.message ? errorMessage.message : '系统维护之中';
                    layer.msg(errorMessage);
                },
                complete: function(e){
                    setTimeout(function(){
                        _this.removeAttr('disabled');
                    }, 2000);
                }
            });
        });
    });
</script>
